// base
import Taro, { Component } from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem, Button, Form } from '@tarojs/components'
import { connect } from '@tarojs/redux'
// less
import './index.less'
import { UPDATELANDMARK } from '../../../../store/types/landmark'
import { navigateTo } from '../../../../crossplatform/apiservice/navigate'
import pagejumplist from '../../../../configuration/pagejumplist.json'
import messagePush from '../../../../util/messagePush'
import { dealImgUrl } from '../../../../configuration/staticimg'
import tool from '../../../../util/tool'

@connect(
  ({ landmark, userinfo }) => ({
    landmarkName: landmark.landmarkName,
    ...userinfo
  }),
  dispatch => ({
    updateLandmark(payload) {
      dispatch({
        type: UPDATELANDMARK,
        payload: {
          ...payload
        }
      })
    }
  })
)
class TopLocation extends Component {
  static defaultProps = {
    banner: []
  }
  constructor(props) {
    super(props)
    this.state = {
      swiperCurrent: 0
    }
  }
  componentWillMount() {
    // onLoad
  }

  componentDidMount() {
    // onready
  }

  componentWillUnmount() {
    // onUnload
  }

  componentWillReceiveProps(nextprops) {}

  goto = tool.throttle(() => {
    navigateTo({
      url: pagejumplist['city-location'].path
    })
  })

  onSwiperChange = e => {
    const {
      detail: { current }
    } = e

    this.setState({
      swiperCurrent: current
    })
  }

  search = () => {
    navigateTo({
      url: pagejumplist['search-page'].path
    })
  }

  formSubmit = e => {
    let { formId } = e.detail
    const { openId, userId } = this.props
    messagePush.insertFormId({ userId, formId, openId })
  }

  onSubmitImg = () => {
    // 点击banner按钮
  }

  render() {
    let { landmarkName, banner } = this.props
    const { swiperCurrent } = this.state

    return (
      <View className="TopLocation_id05777">
        <View class="top-container">
          <View className="box-wrap" onClick={this.goto}>
            <View className="text-wrap">{landmarkName}</View>
            <Image
              className="trans-bt"
              src="https://imagesize.hrwork.com/sp/files/f1b641a7-7e77-4489-9a7c-a35ce360e026.png"
            />
          </View>
          <Image
            className="box-search"
            src="https://imagesize.hrwork.com/sp/files/2bf00c41-5ffe-431f-8c66-252b2955d028.png"
            onClick={this.search}
          />
        </View>
        <View className="swiper-container">
          <Swiper
            className="top-swiper"
            autoplay
            interval={3000}
            circular
            current={swiperCurrent}
            onChange={this.onSwiperChange}
          >
            {banner.map((data, index) => {
              return (
                <SwiperItem className="top-swiper-item" key={index}>
                  <Form onSubmit={this.formSubmit} reportSubmit>
                    <Button formType="submit" className="form-btn" onClick={this.onSubmitImg}>
                      <Image lazy-load src={dealImgUrl(data.img)} mode="aspectFill" />
                    </Button>
                  </Form>
                </SwiperItem>
              )
            })}
          </Swiper>
        </View>

        <View className="swpier-indicator">
          {banner.map((data, index) => {
            return (
              <View
                className={`indicator-item ${
                  index == swiperCurrent ? 'indicator-item-active' : ''
                }`}
                key={index}
              />
            )
          })}
        </View>
      </View>
    )
  }
}

export default TopLocation
